<template>
	<el-dialog :visible.sync="dialogFormVisible" :header="false" width="800px" @close="close">

		<audio :src="voiceUrl" controls ref="audio" class="po" @ended="playEnd" style="display:none"></audio>
		<div class="word flex items-center">{{ word.word }}<div class="yinbiao" style="margin-left: 5px;">{{ word.phonetic_br }}</div></div>

		<!-- <el-divider content-position="left"></el-divider> -->
		<el-tabs v-model="activeName" >
			<el-tab-pane name="0" label="简明释义">
				<div style="padding: 0 10px;">
					<div style="font-size: 15px; font-weight: bold; color: #333;">音标</div>
					<div class="flex mt10 mb20">
						<div class="flex" v-if="word.phonetic_br">
							<span style="margin-right: 4px; flex: 1 1 0%;">英 {{ word.phonetic_br }}</span>
							<a class="cur" @click="playAudio(word.pronunciation_br)"><img style="width: 16px; margin-top: 2px;" src="@/assets/shengyin.png" alt=""></a>
						</div>
						<div class="flex ml10" v-if="word.phonetic">
							<span style="margin-right: 4px; flex: 1 1 0%;">美 {{ word.phonetic }}</span>
							<a class="cur" @click="playAudio(word.pronunciation)"><img style="width: 16px; margin-top: 2px;" src="@/assets/shengyin.png" alt=""></a>
						</div>
					</div>
					<div style="font-size: 15px; font-weight: bold; color: #333;">中文翻译</div>
					<div class="mt10">
						<ul class="concise">
							<li class="pe3BTnP0" v-for="(concise, index) in word.concise">
								<div class="DYOlD2xd">{{ concise.property }}.</div>
								<div class="flex" v-if="concise.phonetic">
									<span style="margin-right: 4px; flex: 1 1 0%;">{{ concise.phonetic }}</span>
									<a v-if="concise.pronunciation" @click="playAudio(concise.pronunciation)"><i class="el-icon-video-play"></i></a>
								</div>
								<div class="GwaHAmdc">{{ concise.definition }}</div>
							</li>
						</ul>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane name="1" label="牛津词典" v-if="word?.oxford?.length>0">
				<!-- <el-tabs v-model="activeName" size="mini">
					<el-tab-pane :label="oald.property" :name="inx" v-for="(oald,inx) in word.oxford" :key="oald.id">

					</el-tab-pane>
				</el-tabs> -->
				<div style="padding: 0 10px;">
					<div class="badge" :class="{actived: niujingindex === inx }" @click="niujingindex = inx" v-for="(oald,inx) in word.oxford">{{oald.property}}</div>
					<template v-for="(oald,inx) in word.oxford">
						<div v-if="niujingindex === inx">
							<div class="flex mt10 mb10">
								<div class="flex" v-if="oald.phons_br">
									<span style="margin-right: 4px; flex: 1 1 0%;">英{{ oald.phons_br }}</span>
									<a class="cur" @click="playAudio(oald.pron_uk)"><img style="width: 16px; margin-top: 2px;" src="@/assets/shengyin.png" alt=""></a>
								</div>
								<div class="flex ml10" v-if="oald.phons_n_am">
									<span style="margin-right: 4px; flex: 1 1 0%;">美{{ oald.phons_n_am }}</span>
									<a class="cur" @click="playAudio(oald.pron_us)"><img style="width: 16px; margin-top: 2px;" src="@/assets/shengyin.png" alt=""></a>
								</div>
							</div>

							<div class="word-definition" v-for="(oald_definition,inx) in oald.definitions">
								<el-divider content-position="left" v-if="oald_definition.short_def">
									<strong>{{ oald_definition.short_trans }} {{ oald_definition.short_def }}</strong>
								</el-divider>
								<div style="font-size: 15px; font-weight: bold; margin-bottom: 10px;">释义</div>
								<div v-for="(definition,inx2) in oald_definition.definitions" style="color: #333; ">
									<div style="font-weight: bold" v-if="definition.sensetop_def">
										<p class="mb10">
											{{ definition.no }}. {{ definition.grammar }} {{ definition.sensetop_def }} {{ definition.sensetop_trans }}
										</p>
										<p class="mb10" style="background-color: #f6f6f6; padding: 1rem 1.5rem;" v-if="definition.define">
											{{ definition.define }}
										</p>
										<p class="mb10" style="color: #999; font-size: 12px; font-weight: 400;" v-if="definition.translation">
											{{ definition.translation }}
										</p>
									</div>
									<div style="font-weight: bold" v-else>
										<p class="mb10" v-if="definition.define">
											{{ definition.no }}. {{ definition.grammar }} {{ definition.define }}
										</p>
										<p class="mb10" style="color: #999; font-size: 12px; font-weight: 400;" v-if="definition.translation">
											{{ definition.translation }}
										</p>
									</div>

									<div style="background-color: #f6f6f6; border-radius: 10px; padding: 10px 20px; margin-top: 10px; margin-bottom: 20px;" v-if="definition?.examples?.length>0">
										<div style="font-size: 15px; font-weight: bold;">例句</div>
										<div style="color: #aca08e;margin: 10px 0; display: flex;" v-for="(example, bb) in definition.examples">
											<span style="color: #666; margin-right: 5px;">{{bb + 1}}.</span>
											<div>
												<p style="color: #333; margin-bottom: 5px">
													{{ example.example }}
													<a class="cur" style="margin: 0 10px;" v-if="example.pron_uk"  @click="playAudio(example.pron_uk)">英<img style="width: 16px; margin-bottom: -2px; margin-left: 5px;" src="@/assets/shengyin.png" alt=""></a>
													<a class="cur" v-if="example.pron_usk"  @click="playAudio(example.pron_usk)">美<img style="width: 16px; margin-bottom: -2px; margin-left: 5px;" src="@/assets/shengyin.png" alt=""></a>
												</p>
												<p>
													{{ example.translation }}
												</p>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="idioms" v-if="oald?.idioms?.length>0">
								<div style="padding: 15px; border: 1px solid #DCDFE6; border-radius: 10px;">
									<h3>习语 Idioms</h3>
									<div v-for="(idiom,inx) in oald.idioms">
										<p>{{ idiom.title }}</p>
										<div v-for="(definition,inx2) in idiom.definitions" style="color: #333">
											<div style="font-weight: bold" v-if="definition.sensetop_def">
												<p>
													{{ definition.grammar }} {{ definition.sensetop_def }} {{ definition.sensetop_trans }}
												</p>
												<p>
													{{ definition.define }}
												</p>
												<p style="color: #999; font-size: 12px;">
													{{ definition.translation }}
												</p>
											</div>
											<div style="font-weight: bold" v-else>
												<p>
													{{ definition.grammar }} {{ definition.define }}
												</p>
												<p style="color: #999; font-size: 12px;">
													{{ definition.translation }}
												</p>
											</div>

											<div>
												<div style="color: #aca08e;margin-bottom: 10px;" v-for="example in definition.examples">
													<p>
														{{ example.example }}
														<a v-if="example.pron_uk" class="cur" style="margin: 0px 10px;" @click="playAudio(example.pron_uk)">英 <img style="width: 16px; margin-bottom: -2px; margin-left: 5px;" src="@/assets/shengyin.png" alt=""></a>
														<a v-if="example.pron_usk" class="cur" @click="playAudio(example.pron_usk)">美 <img style="width: 16px; margin-bottom: -2px; margin-left: 5px;" src="@/assets/shengyin.png" alt=""></a>
													</p>
													<p>
														{{ example.translation }}
													</p>
												</div>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
					</template>
				</div>
			</el-tab-pane>
            <el-tab-pane name="2" label="例句" v-if="hasConciseExample">
                <div style="padding: 0 10px;">
                    <template v-for="(oald,inx) in word.concise">
                        <div>
                            <div class="word-definition" v-for="(oald_definition,inx) in oald.definitions">
                                <template v-if="oald_definition?.examples?.length > 0">
                                    <el-divider content-position="left" v-if="oald_definition.definition">
                                        <strong>{{ oald_definition.definition }}</strong>
                                    </el-divider>
                                    <div style="background-color: #f6f6f6; border-radius: 10px; padding: 10px 20px; margin-top: 10px; margin-bottom: 20px;">
                                        <div style="font-size: 15px; font-weight: bold;">例句</div>
                                        <div style="color: #aca08e;margin: 10px 0; display: flex;" v-for="(example, bb) in oald_definition.examples">
                                            <span style="color: #666; margin-right: 5px;">{{ bb + 1 }}.</span>
                                            <div>
                                                <p style="color: #333; margin-bottom: 5px">
                                                    {{ example.example }}
                                                    <a class="cur" style="margin: 0 10px;" v-if="example.pronunciation" @click="playAudio(example.pronunciation)"><img style="width: 16px; margin-bottom: -2px; margin-left: 5px;" src="@/assets/shengyin.png" alt=""></a>
                                                </p>
                                                <p>
                                                    {{ example.translation }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </template>
                </div>
            </el-tab-pane>
		</el-tabs>
	</el-dialog>
</template>

<script>

import {addWord, queryDict} from "@/api/articleWord";

export default {
	name: 'dict-dialog',
	data() {
		return {
			activeName: '0',
			word: [],
			options: [],
			title: '',
			loading: false,
			dialogFormVisible: false,

			voiceUrl: '',
			hasConciseExample: false,
			niujingindex: 0
		};
	},
	mounted() {

	},
	methods: {
		async showEdit(word) {
			this.title = '单词释义';
			console.log('进来了', word)
			if (word) {
				await this.getData(word);
                this.activeName = '0'
			} else{
				this.$message.error('不是一个正确的单词！')
			}
		},
		close() {
			this.formData = this.$options.data().formData;
			this.dialogFormVisible = false;
		},
		//点击播放
		playAudio(url) {
			this.voiceUrl = url
			this.$nextTick(() => {
				this.$refs.audio.play()
			})
		},
		playEnd() {
			this.voiceUrl = ''
		},
		async getData(word) {

			let result = await queryDict({word: word})
			console.log(result.data)
			if(result.data){
				console.log('进来了')
				let res = result.data

				this.title = res.word + '预览'

                this.hasConciseExample = false
                if (res.concise?.length > 0) {
                    res.concise.forEach((item, index) => {
                        item.definitions.forEach((item, index) => {
                            if (item.examples?.length > 0){
                                this.hasConciseExample = true
                            }
                        })
                    })
                }

				//增加释义序号
				res.oxford.forEach((item, index) => {
					let i = 1;
					item.definitions.forEach((item, index) => {
						item.definitions.forEach((item, index) => {
							item.no = i
							i++
						})
					})
				})

				this.word = res;

				this.dialogFormVisible = true;
				console.log(this.dialogFormVisible)
			} else{
				this.$message.error('不是一个正确的单词！')
			}
		},
	},
};
</script>
<style scoped>
.flex{display: flex;}
.items-center{align-items: center;}
a{color: #666;}
.word{
	color: #000;
	font-size: 24px;
	font-weight: bold;
	line-height: 25px;
	margin-bottom: 20px;
}
.yinbiao{
	font-size: 14px;
	color: #999;
	margin-left: 10px;
}
.concise{
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
	overflow: hidden;
	padding-left: 0;
}
.concise li{
	display: flex;
	margin-bottom: 9px;
}

.DYOlD2xd {
	color: #999;
	float: left;
	font-family: Athelas, Arial;
	font-size: 15px;
	font-style: italic;
	font-weight: 400;
	min-width: 24px;
	padding-right: 10px;
}
.GwaHAmdc{
	flex: 1 1;
	font-size: 15px;
}
.word-category {
	margin-bottom: 20px;
}
.mb20{
	margin-bottom: 20px;
}
.ml10 {
	margin-left: 20px;
}

.mt10 {
	margin-top: 10px;
}

.mb10 {
	margin-bottom: 10px;
}

.word-definition {
	margin-bottom: 20px;
}

.idioms {
	margin-top: 20px;
}

.el-card {
	padding: 20px;
}

::v-deep .el-tabs__active-bar{height: 2px;}
::v-deep .el-tabs__item{font-size: 14px;}
::v-deep .el-tabs__nav-wrap::after{background-color: #DCDFE6; height: 1px;}
::v-deep .el-dialog__header{display: none;}
.cur{cursor: pointer;}
.badge{
	align-items: center;
    background: #eeeff7;
    border-radius: 20px;
    color: #666;
    display: inline-flex;
    font-size: 12px;
    font-weight: 400;
    justify-content: center;
    line-height: 22px;
    margin-right: 11px;
    margin-top: 11px;
    outline: none;
    overflow: hidden;
    padding: 0 11px;
    text-decoration: none;
	cursor: pointer;
}
.badge.actived{
	background: rgba(111,138,233,.12);
    color: #414ec5;
}
</style>
